import React, { Component } from 'react';
import { Input, Select, Button, Table, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';




const { Search } = Input;
const options = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '校长',
        label: '校长',
    },
    {
        value: '副校长',
        label: '副校长',
    },
    {
        value: '办公室主任',
        label: '办公室主任',
    },
    {
        value: '教学部主任',
        label: '教学部主任',
    },
    {
        value: '招生办主任',
        label: '招生办主任',
    },
    {
        value: '教师',
        label: '教师',
    },
    {
        value: '保安',
        label: '保安',
    },
];
const options1 = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '教务处',
        label: '教务处',
    },
    {
        value: '政教处',
        label: '政教处',
    },
    {
        value: '总务处',
        label: '总务处',
    },
    {
        value: '教研室',
        label: '教研室',
    },
    {
        value: '校长办公室',
        label: '校长办公室',
    },
    {
        value: '安保部门',
        label: '安保部门',
    },
    {
        value: '教育部门',
        label: '教育部门',
    },
];
interface DataType {
    key: string;
    name: string;
    num: number;
    grand: string;
    idnum: number;
    type: string;
}
const columns: ColumnsType<DataType> = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',

    },
    {
        title: '手机号',
        dataIndex: 'num',
        key: 'num',
    },
    {
        title: '职务',
        dataIndex: 'grand',
        key: 'grand',
    }, {
        title: '身份证号',
        dataIndex: 'idnum',
        key: 'idnum',
    },
    {
        title: '部门',
        dataIndex: 'type',
        key: 'type',
    },
    {
        title: '操作',
        key: 'action',
        render: () => (
            <Space size="middle">
                <a>编辑 </a>
                <a>删除</a>
            </Space>
        ),
    },
];
const data: DataType[] = [
    {
        key: '1',
        name: '大鱼',
        num: 13555556669,
        grand: '保安',
        idnum: 56414544646846848486,
        type: '安保部门',

    },
    {
        key: '1',
        name: '大鱼',
        num: 13555556669,
        grand: '保安',
        idnum: 56414544646846848486,
        type: '安保部门',

    },
    {
        key: '1',
        name: '大鱼',
        num: 13555556669,
        grand: '保安',
        idnum: 56414544646846848486,
        type: '安保部门',

    },
    {
        key: '1',
        name: '大鱼',
        num: 13555556669,
        grand: '保安',
        idnum: 56414544646846848486,
        type: '安保部门',

    },

    {
        key: '1',
        name: '大鱼',
        num: 13555556669,
        grand: '保安',
        idnum: 56414544646846848486,
        type: '安保部门',

    },



];
class workerManagement extends Component {
    render() {
        return (
            <div>
                <div className='header'>
                    <h1 style={{ backgroundColor: "#dedede", height: '50px', lineHeight: '50px', color: 'blue', fontSize: '18px', textIndent: '1em' }}>职工管理</h1>
                </div>
                <div>
                    <Input placeholder="姓名/手机/身份证号" style={{ width: '250px', marginTop: '20px' }} />
                    <Select defaultValue="职务" options={options} style={{ width: '150px',margin:'0px 20px' }} />
                    <Select defaultValue="部门" options={options1} style={{ width: '150px' }} />
                    <Button type="primary" style={{margin:'0px 20px '}}>查询</Button>
                    <Button>重置</Button>
                    <Button type="primary" style={{marginLeft:'100px'}}>新增职工</Button>
                </div>
                <div style={{ border: '1px solid #bae7ff', backgroundColor: '#e6f7ff', height: '50px', lineHeight: '50px', borderRadius: '5px', marginTop: '20px', textIndent: '2em' }}>
                    查询结果：共计{'num'}条数据
                </div>
                <div>

                    <Table columns={columns} dataSource={data} bordered={true} />

                </div>
            </div>
        );
    }
}

export default workerManagement;